<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<style type="text/css">
			#test {
			text-align: center;
			background: #39c;
			padding: 10px;
			width: 180px;
			color: #fff;
			margin: 0 auto;
			text-shadow: 0 1px 0 rgba(0,0,0,.3);
			background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
			background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
			background-image: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
			border-radius: 5px;
			border: 1px solid #17a;
			box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
			font-weight: bold;
			
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			backface-visibility: hidden;

			-webkit-animation-duration: 1s;
			-webkit-animation-delay: .2s;
			-webkit-animation-timing-function: ease;
			-webkit-animation-fill-mode: both;

			-moz-animation-duration: 1s;
			-moz-animation-delay: .2s;
			-moz-animation-timing-function: ease;
			-moz-animation-fill-mode: both;

			-ms-animation-duration: 1s;
			-ms-animation-delay: .2s;
			-ms-animation-timing-function: ease;
			-ms-animation-fill-mode: both;

			animation-duration: 1s;
			animation-delay: .2s;
			animation-timing-function: ease;
			animation-fill-mode: both;
		}
@-webkit-keyframes bounce {
			0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
			40% {-webkit-transform: translateY(-30px);}
			60% {-webkit-transform: translateY(-15px);}
		}

		@-moz-keyframes bounce {
			0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
			40% {-moz-transform: translateY(-30px);}
			60% {-moz-transform: translateY(-15px);}
		}

		@-ms-keyframes bounce {
			0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
			40% {-ms-transform: translateY(-30px);}
			60% {-ms-transform: translateY(-15px);}
		}

		@keyframes bounce {
			0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
			40% {transform: translateY(-30px);}
			60% {transform: translateY(-15px);}
		}
#test.bounce {
			-webkit-animation-name: bounce;
			-moz-animation-name: bounce;
			-ms-animation-name: bounce;
			animation-name: bounce;
		}
	
		</style>
	</head>
	<body>
		<div id="test">test</div>
		<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
			$('#test').hover(function(){
				$(this).addClass('bounce');
			},function(){
				$(this).removeClass('bounce');
			});
		});
		</script>
	</body>
</html>
